<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        import { reactive, effect, ref, toRefs, computed } from './reactive.js'
        // import effect from './effect.js'


        /** reactive测试 */
        // const obj = reactive({
        //     name: 'zs',
        //     age: 18
        // })
        // obj.name = 'lisi'
        // delete obj.age

        // console.log(obj);
        /** reactive测试 */


        /** effect测试 */
        // const product = reactive({
        //     name: 'iphone',
        //     price: 5000,
        //     count: 3
        // })
        // let total = 0
        // effect(() => {
        //     total = product.price * product.count
        // })
        // console.log(total);
        // product.price = 4000
        // console.log(total);
        // product.count = 1
        // console.log(total);
        /** effect测试 */


        /** ref测试 */
        // let price = ref(5000)
        // let count = ref(3)
        // let total = 0
        // effect(() => {
        //     total = price.value * count.value
        // })
        // console.log(total);
        // price.value = 4000
        // console.log(total);
        // count.value = 1
        // console.log(total);
        /** ref测试 */


        /** toRefs测试 */
        // function useProduct(params) {
        //     const product = reactive({
        //         name: 'iphone',
        //         price: 5000,
        //         count: 3
        //     })
        //     return toRefs(product)
        // }
        // const { price, count } = useProduct()
        // let total = 0
        // effect(() => {
        //     total = price.value * count.value
        // })
        // console.log(total);
        // price.value = 4000
        // console.log(total);
        // count.value = 1
        // console.log(total);
        /** toRefs测试 */


        /** computed测试 */
        const product = reactive({
            name: 'iphone',
            price: 5000,
            count: 3
        })
        let total = computed(() => {
            return product.price * product.count
        })
        console.log(total.value);
        product.price = 4000
        console.log(total.value);
        product.count = 1
        console.log(total.value);
        /** computed测试 */

        /** reactive测试 */
        /** reactive测试 */
        /** reactive测试 */
        /** reactive测试 */

    </script>
</body>

</html>